<template>
	<view class="evaluate-index-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="评价"></CustomNav>
		<view class="form-block block" :style="'margin-top:'+mt">
			<view class="form-item">
				<view class="form-label" style="margin-bottom: 20rpx;">为此次服务评分</view>
				<uni-rate v-model="score" :max="5" :size="30" :margin="30" :isFill="true"></uni-rate>
			</view>
			<view class="form-item">
				<view class="form-label">评价内容</view>
				<textarea v-model="comments" class="textarea" placeholder-class="input-placeholder" placeholder="请输入评价内容"></textarea>
			</view>
		</view>
		<view class="btn normal" @click="submit">提交</view>
	</view>
</template>

<script>
	import {saveComments} from '@/api/sundry.js'
	export default{
		data(){
			return{
				type:2,
				associated_id:0,
				work_id:0,
				work_rob_id:0,
				comments:'',
				score:0,
				topBgColor: 'rgba(0,0,0,0)',
			}
		},
		methods:{
			submit(){
				if(this.score==0){
					this.showToast('请选择评分');
					return;
				}
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				const data={
					type:this.type,
					associated_id:this.associated_id,
					work_id:this.work_id,
					work_rob_id:this.work_rob_id,
					comments:this.comments,
					score:this.score,
				}
				saveComments(data).then(()=>{
					uni.$off('completeComments')
					this.showToast('评价成功',()=>{
						this.back()
					})
				})
			}
		},
		onLoad(opt) {
			this.type=opt.type||2;
			if(this.type==3){
				if(!opt.work_rob_id){
					this.showToast('参数错误',()=>{
						this.back()
					})
					return;
				}
				this.work_rob_id=opt.work_rob_id;
			}
			if(!opt.associated_id||!opt.work_id){
				this.showToast('参数错误',()=>{
					this.back()
				})
				return;
			}
			this.associated_id=opt.associated_id;
			this.work_id=opt.work_id;
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-index-page {
		overflow: hidden;
	
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
	
		.block {
			width: $content-width;
		}
	
		.form-block {
			margin: 30rpx auto;
			padding: 30rpx;
			background: #fff;
			border-radius: 14px;
			.form-item{
				width: 100%;
				height: auto;
				min-height: 100rpx;
				flex-wrap: wrap;
				align-items: flex-start;
				.form-label{
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					.require{
						color: red;
					}
					.no-require{
						color: #fff;
					}
				}
				.textarea{
					font-size: 28rpx;
					padding: 30rpx;
					margin-top: 20rpx;
					width: 100%;
					border-radius: 12px;
					background: #f5f6f8;
				}
			}
		}
	
		.btn {
			margin: 30rpx auto;
		}
	}
</style>